<template>
  <div>
    javaPersonCount：{{ javaPersonCount }}<br/>
    pythonPersonCount：{{ pythonPersonCount }}<br/>
    jCount: {{ jCount }} <br/>
    pCount: {{ pCount }} <br/>
    totalCount：{{ totalCount }}<br/>
  </div>

</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      initCount: 100
    }
  },
  computed: {

    // 数组形式，等同于 {javaPersonCount: "javaPersonCount"}
    ...mapState(["javaPersonCount", "pythonPersonCount"]),

    // 使用对象展开运算符将此对象混入到外部对象中
    ...mapState({
      jCount: 'javaPersonCount',
      pCount: 'pythonPersonCount',

      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      totalCount(state) {
        return state.javaPersonCount + state.pythonPersonCount + this.initCount
      }

    }),
  },
}


</script>